import { renderer } from "./render.js";
import { onUnmounted, KeepAlive } from "./component.js";
import { Teleport } from "./teleport.js";
import { Transition } from "./transition.js";
// import KeepAlive from "./keepAlive.js";

const MyComponent = {
  name: "MyComponent",
  setup() {
    onUnmounted(() => {
      console.log(123123123);
    });
    return () => {
      return {
        type: "div",
        children: "MyComponent",
      };
    };
  },
};

// const vnode = {
//   type: KeepAlive,
//   children: {
//     default() {
//       return {
//         type: MyComponent,
//       };
//     },
//   },
// };

// const vnode1 = {
//   type: KeepAlive,
//   children: {
//     default() {
//       return {
//         type: "div",
//         children: "123123",
//       };
//     },
//   },
// };

/* teleport组件 */
// const vnode = {
//   type: Teleport,
//   props: {
//     to: "body",
//   },
//   children: [
//     {
//       type: "div",
//       children: "123123",
//     },
//   ],
// };

/* Transition 组件 */
const vnode = {
  type: Transition,
  children: {
    default() {
      return {
        type: "div",
        children: "123123",
      };
    },
  },
};

renderer.render(vnode, document.getElementById("app"));
